import React, {useMemo} from "react"
import {View} from "@tarojs/components"
import Taro, {useRouter} from '@tarojs/taro'
import Recommend from '@/components/Recommend/Recommend'
import Nav from '@/components/Nav/Nav'
import Topping from '@/components/Topping/Topping'
import {getDecorate} from '@/packageA/api/Outfit'
import {SightInfo, SightInfoRet} from '@/type'
import {useSightLoading} from '@/hooks'
import PageLoading from '@/components/PageLoading/PageLoading'
import NoResult from '@/components/NoResult/NoResult'
import './Outfit.scss'


const Outfit: React.FC = () => {
  const {params} = useRouter<{id: string, title: string}>()

  const {sightInfos, more} = useSightLoading((page): Promise<SightInfoRet> => {
    return getDecorate(params.id || "26793", {page, size: 10})
  }, 10, true)


  function onselect (sightInfo: SightInfo) {
    console.log(sightInfo)
    Taro.navigateTo({
      url: '/packageA/Scene/Scene',
    })
  }

  const renderRecommend = useMemo(() => {
    if (sightInfos.length && more) {
      return <Recommend sightInfos={sightInfos} mode='mode2' onselect={onselect} />
    } else if (more) {
      return <PageLoading />
    } else {
      return <NoResult />
    }
  }, [sightInfos, more])

  return <View className='container'>
    <Nav text={params.title} color='#000' />
    <View className='outfit_box' />
    <View className='scroll_wrap'>
      {renderRecommend}
    </View>
    <Topping />
  </View>
}

export default Outfit
